import { api } from "@/api";
import BannerPage from "@/components/page/BannerPage";
import { useEffect, useState } from "react";
import { Pagination, Timeline } from "antd";
import styled from "styled-components";
import { formateDate } from "@/utils/common";
import { useNavigate } from "react-router-dom";

const Styled = styled.div`
  p.f20 {
    font-size: 20px;
  }
  .time {
    font-weight: 700;
    margin-right: 3rem;
  }
`;

const Archive = () => {
  const navigate = useNavigate();
  const [loading, setLoading] = useState(true);
  const [total, setTotal] = useState(0);
  const [archiveList, setArchiveList] = useState([]);
  const [curret, setCurrent] = useState(1); //当前页数

  let [TimelineItem, setTimelineItem] = useState([]);

  const getArchives = async () => {
    const res = await api.getArchives({
      page_num: curret,
      page_size: 5,
    });
    setArchiveList(res.data.pageData);
    setTotal(res.data.total);
    setLoading(false);
    let data = res.data.pageData;
    data = data.map((item, idx) => {
      return {
        color: "green",
        children: (
          <>
            <span className="time">{formateDate(item.created_at)}</span>
            <a
              href={`#/article/${item.id}`}
              style={{ color: "#666", fontSize: "16px" }}
            >
              {item.title}
            </a>
            {idx !== archiveList.length - 1 ? (
              <hr
                style={{
                  borderStyle: "dashed",
                  borderWidth: "2px",
                  borderColor: "rgba(210, 235, 253, 1)",
                  marginTop: "3.75rem",
                  marginBottom: "3.75rem",
                }}
              />
            ) : null}
          </>
        ),
      };
    });
    data.unshift({
      color: "gray",
      children: (
        <p className="f20">
          目前共计 {res.data.pageData.length} 篇文章，继续加油！
        </p>
      ),
    });
    setTimelineItem([...data]);
  };

  useEffect(() => {
    (async () => {
      await getArchives();
    })();
  }, []);

  return (
    <Styled>
      <BannerPage label="archive" title="归档" loading={loading}>
        <Timeline className="card-fade-up" items={TimelineItem} />
        {/* 分页 */}
        {/* <div
          className="flex"
          style={{
            alignItems: "center",
            justifyContent: "center",
            marginBottom: "5rem",
          }}
        >
          <Pagination
            current={curret}
            pageSize={Math.ceil(total / 10)}
            onChange={(page, pageSize) => {}}
          />
        </div> */}
      </BannerPage>
    </Styled>
  );
};

export default Archive;
